<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="styles/example.css">

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

    <link rel="stylesheet" href="./styles/github.css">
    <script src="js/highlight.pack"></script>

    <link rel="stylesheet" href="styles/tabpage.css">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>

    <script src="../src/core/PrivateScope.js"></script>
    <script src="../src/core/Utility.js"></script>
    <script src="../src/core/Deferred.js"></script>
    <script src="../src/core/AttachedData.js"></script>
    <script src="../src/core/DataObserver.js"></script>
    <script src="../src/core/ArrayMonitor.js"></script>
    <script src="../src/core/GlobalSymbolHelper.js"></script>
    <script src="../src/core/OptionParser.js"></script>
    <script src="../src/core/KnotManager.js"></script>
    <script src="../src/core/CBSLoader.js"></script>
    <script src="../src/core/HTMLAPProvider.js"></script>
    <script src="../src/core/HTMLKnotBuilder.js"></script>
    <script src="../src/core/AddonHTMLAPProvider.js"></script>
    <script src="../src/core/ComponentAPProvider.js"></script>
    <script src="../src/core/KnotInterface.js"></script>

    <link rel="stylesheet" href="styles/tabpage.css" id="tabpageCSS">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs" id="tabpageCBS"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>
    <script src="js/tabpage.js" id="tabPageSource"></script>
    <script type="text/javascript" src="js/sourceTab.js"></script>

    <script src="../src/debugger/knot.debug.js"></script>

    <script type="text/cbs" class="exampleCBS">
        /*bind #hello1Msg.text with #nameInput.value, add a string "Hello " before #nameInput.value
        [immediately:1] tell knot.js that it should update for each stroke on #nameInput */
        #hello1Msg{
            text:#nameInput.value[immediately:1]>{return value?"Hello " + value:"";}
        }

        /*bind #hello1Msg.text with #firstNameInput.value and #lastNameInput.value, the first name and last name will be joined by a " "
        [immediately:1] tell knot.js that it should update for each stroke */
        #hello2Msg span{
            text: (#firstNameInput.value[immediately:1] & #lastNameInput.value[immediately:1]) > {return value.join(" ");}
        }
    </script>
</head>
<body>

<div id="examples">
    <div class="knot_example">
        <h2>Knot.js example - hello 1</h2>
        <p class="comment">
            From angular.js
        </p>
        <label>Name:</label>

        <input type="text" id="nameInput" placeholder="Enter a name here">
        <h3 id="hello1Msg"></h3>

    </div>

    <br/>

    <div class="knot_example">
        <h2>Knot.js example - hello 2</h2>
        <p class="comment">
            From knockout.js
        </p>

        <p>First name: <input id="firstNameInput" value="Planet"/></p>
        <p>Last name: <input id="lastNameInput"  value="Earth"/></p>
        <h3 id="hello2Msg">Hello, <span> </span>!</h3>
    </div>
</div>

    <div id="sourceTab" knot-debugger-ignore  knot-component="SourceTabPage">
    </div>
    <script type="text/cbs">
        #sourceTab{
            sourceInfo:/sourceCodeInfo.codes
        }
    </script>
    <script>
        //collect source codes before knot changes the HTML
        window.sourceCodeInfo = {codes:null};

        window.SourceCodeHelper.collectSourceCodes(
                [{selector:"#examples",title:"HTML", type:"html"},
                    {selector:".exampleCBS",title:"CBS", type:"cbs"}],
                function(res){
                    window.sourceCodeInfo.codes = res;
                });
    </script>

</body>
</html>